import React from 'react';
import { connect } from 'dva';
import { Card, Row, Col } from 'antd';

const  colors = ['#85AED6', '#E9C87A', '#7283A1', '#7ECF94', '#FA5F5E']

/**
 * 组合资产图表:CategoryAssetsCharts	
 */
import { IECharts } from '../../../components';
const CategoryAssetsCharts = ({
    fieldList = [],
    list = [],
}) => {
    const data = []
    function compare(property) {
        return function (a, b) {
            var value1 = a[property];
            var value2 = b[property];
            return value1 - value2;
        }
    }
    list.sort(compare('id'))
    list.map(item => {
        data.push({
            name: item.name,
            value: item.lastRatio,
            increase: item.increase
        })
    })

    const myProps = {
        option: {
            color: colors,
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                show: false,
                // orient: 'vertical',
                // right: '16',
                // top: 'middle',
                // data: data.map(item => item.name),
                // formatter: (name) => {
                //     const cd = data.find(item => item.name === name)
                //     // return  `${name} 占比：${cd.value.toPercent()} 较上期：${cd.increase}`;
                //     if (cd.increase < 0) {
                //         return `${name} 占比：${cd.value.toPercent()} 较上期：${cd.increase.toPercent()}`;
                //     }
                //     else if (cd.increase === 0) {
                //         return `${name} 占比：${cd.value.toPercent()} 较上期：${cd.increase}`;
                //     }
                //     else {
                //         return `${name} 占比：${cd.value.toPercent()} 较上期：+${cd.increase.toPercent()}`;
                //     }
                // }
            },
            series: [
                {
                    name: '类别资产规模',
                    type: 'pie',
                    radius: '100%',
                    center: ['40%', '50%'],
                    label: {
                        normal: {
                            show: false,
                        }
                    },
                    data,
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    hoverOffset :0,
                    // itemStyle: {
                    //     emphasis: {
                    //         shadowBlur: 10,
                    //         shadowOffsetX: 0,
                    //         shadowColor: 'rgba(0, 0, 0, 0.5)'
                    //     }
                    // }
                }
            ]
        }
    }
    return (
        <div style={{ height: 150 }}>
            <IECharts {...myProps} resizable={true} />

        </div>
    );

}

/**
 * 类别资产:CategoryAssets
 * 子组件
 * 组合资产图表:CategoryAssetsCharts		
 */
import TableList from '../../../components/TableList'
class CategoryAssets extends React.Component {
    state = {
        data: JSON.parse(JSON.stringify(this.props.categoryAssets)),
    }

    componentDidMount() {
        this.fetchData(this.props)
    }
    componentWillReceiveProps(nextProps) {

        if ((nextProps.lPortId !== this.props.lPortId) || (nextProps.ratioBegindate !== this.props.ratioBegindate) || (nextProps.ratioEnddate !== this.props.ratioEnddate)) {
            this.fetchData(nextProps)
        }
        if (nextProps.categoryAssets !== this.props.categoryAssets) {
            const datas = JSON.parse(JSON.stringify(nextProps.categoryAssets))


            if (datas.fieldList && datas.fieldList.length) {
                // const ratioArr = datas.fieldList.filter(item => (item.name.indexOf('占比')>-1)||(item.name.indexOf('较上期')>-1))
                // datas.list.map(item => {
                //     ratioArr.map(it=>{
                //         item[it.id] = item[it.id]&&item[it.id].toPercent()
                //     })
                // })
                function compare(property) {
                    return function (a, b) {
                        var value1 = a[property];
                        var value2 = b[property];
                        return value1 - value2;
                    }
                }
                datas.list.sort(compare('id'))
                const ratioArr = datas.fieldList.filter(item => (item.name.indexOf('占比') > -1))
                datas.list.map(item => {
                    ratioArr.map(it => {
                        //  item[it.id] = item[it.id] && item[it.id].toPercent()
                        item[it.id] = item[it.id] && (Math.round(item[it.id]*10000)/100+'%')
                    })
                })

                const ratioArrLatter = datas.fieldList.filter(item => (item.name.indexOf('较上期') > -1))
                datas.list.map(item => {
                    ratioArrLatter.map(it => {
                        if (item[it.id] < 0) {
                            // item[it.id] = <span className="down">{item[it.id].toPercent()}</span>
                             item[it.id] = <span className="down">{Math.round(item[it.id]*10000)/100}%</span>
                        }
                        else if (item[it.id] === 0) {
                            item[it.id] = <span style={{ color: '#d0021b' }}>{item[it.id]}</span>
                        }
                        else {
                            // item[it.id] = <span className="up">+{item[it.id].toPercent()}</span>
                            item[it.id] = <span className="up">+{Math.round(item[it.id]*10000)/100}%</span>
                        }

                    })
                })

            }

            this.setState({
                data: datas,
            })

        }
    }
    //查询数据
    fetchData = (props) => {
        props.dispatch({
            type: 'combinatorialAnalysis/getCategoryAssets',
            payload: props
        })
    }

    render() {
        const {fieldList,list}=this.state.data
        return (
            <Card bordered={false} className="categoryAssets">
                {
                    this.state.data.fieldList && (
                        <Row>
                            <Col span={12} style={{ paddingRight: 27 }}>
                                <TableList {...this.state.data} rowKey="name" />
                            </Col>
                            <Col span={6}>
                            {
                                list&&list.length?<CategoryAssetsCharts {...this.props.categoryAssets} />:null
                            }
                            </Col>
                            <Col span={6}>
                            {
                                list&&list.length?(
                                    <table className="legend">
                                    <thead>
                                        <tr>
                                            <th>名称</th>
                                            <th>占比</th>
                                            <th>较上期</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {
                                            list.map((item, i) => (
                                                <tr key={i}>
                                                    <td><i style={{color:colors[i]}}>■</i>{item.name} </td>
                                                    <td> {item.lastRatio}</td>
                                                    <td>{item.increase}</td>
                                                </tr>
                                            ))
                                        }
                                    </tbody>
                                </table>
                                ):null
                            }
                                
                            </Col>
                        </Row>
                    )
                }
            </Card>

        )
    }
}

CategoryAssets.defaultProps = {
    lPortId: null,
    ratioBegindate: null,//  分类占比 开始时间
    ratioEnddate: null,//  分类占比 结束时间
    categoryAssets: {
        "fieldList": [
            {
                "id": "name",
                "name": "类别资产规模"
            },
            {
                "id": "firstMoney",
                "name": "期初金额"
            },
            {
                "id": "firstRatio",
                "name": "期初占比"
            },
            {
                "id": "lastMoney",
                "name": "期末金额"
            },
            {
                "id": "lastRatio",
                "name": "期末占比"
            },
            {
                "id": "increase",
                "name": "较上期"
            }
        ],
        "list": [
            {
                "name": "股票",
                "firstMoney": 1020,
                "firstRatio": 0.23,
                "lastMoney": 2340,
                "lastRatio": -0.12,
                "increase": 0.78
            }
        ]
    }
}

export default connect()(CategoryAssets)